<template>
  <el-dialog
    :title="title"
    :visible.sync="dialog.isShow"
    width="500px"
    :close-on-click-modal="false"
  >
    <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-position="top" inline :disabled="pageType==='detail'">
      <el-form-item label="字段编码" prop="strparamcode">
        <el-input v-model.trim="dialogForm.strparamcode" clearable />
      </el-form-item>
      <el-form-item label="字段名称" prop="strparamname">
        <el-input v-model.trim="dialogForm.strparamname" clearable />
      </el-form-item>
      <el-form-item label="字段类别" prop="inttype">
        <el-select v-model="dialogForm.inttype" placeholder="请选择" @change="changeInttype">
          <el-option
            v-for="item in inttypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="dialogForm.inttype===1" label="字段属性" prop="fieldproperty">
        <el-input v-model.trim="dialogForm.fieldproperty" placeholder="请录入文本长度" clearable oninput="this.value=this.value.replace(/\D/g,'').replace(/^0+(?=\d)/,'')" />
      </el-form-item>
      <el-form-item v-if="dialogForm.inttype===2" label="字段属性" prop="fieldproperty">
        <el-select v-model="dialogForm.fieldproperty" placeholder="请选择小数位数">
          <el-option
            v-for="item in intdlengths"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="dialogForm.inttype===3" label="字段属性" prop="fieldproperty">
        <el-select v-model="dialogForm.fieldproperty" placeholder="请选择日期格式">
          <el-option
            v-for="item in inttimetypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="dialogForm.inttype===4" label="字段属性" prop="fieldproperty">
        <el-select v-model="dialogForm.fieldproperty" placeholder="请选择数据字典类别">
          <el-option
            v-for="item in findcanuse"
            :key="item.lngdatadictionarytypeid"
            :label="item.strdatadictionarytypename"
            :value="item.lngdatadictionarytypeid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="控制方式" prop="bytisonly">
        <el-select v-model="dialogForm.bytisonly" placeholder="请选择" clearable>
          <el-option
            v-for="item in bytisonlys"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="备注" prop="strnote">
        <el-input
          v-model="dialogForm.strnote"
          type="textarea"
          maxlength="500"
          show-word-limit
          style="width:450px"
        />

      </el-form-item>
    </el-form>
    <div v-if="pageType!=='detail'" slot="footer" class="dialog-footer">
      <el-button v-if="pageType==='add'" type="primary" @click="addSave('dialogForm')">确 定</el-button>
      <el-button v-else type="primary" @click="editSave('dialogForm')">确 定</el-button>
      <el-button v-if="pageType==='add'" type="primary" @click="addSave('dialogForm','multi')">保存并新增</el-button>
      <el-button @click="dialog.isShow = false">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { findById, addData, editData } from '@/api/system/bill-setting/extended-field-setting/index'
export default {
  name: 'ExtendedFieldSettingDialog',
  data() {
    return {
      dialog: {
        isShow: false
      },
      pageType: 'add',
      inttypes: [
        { label: '文本', value: 1 },
        { label: '数字', value: 2 },
        { label: '日期', value: 3 },
        { label: '数据字典', value: 4 }
      ],
      bytisonlys: [
        { label: '唯一', value: 0 },
        { label: '不唯一', value: 1 }
      ],
      inttimetypes: [
        { label: '日期', value: 1 },
        { label: '时间', value: 2 }
      ],
      intdlengths: [0, 1, 2, 3, 4],
      findcanuse: [],
      dialogForm: {
        strparamcode: '',
        strparamname: '',
        inttype: 1,
        fieldproperty: '',
        // intlength: null,
        // intdlength: null,
        // inttimetype: null,
        // lngdatadictionarytypeid: null,
        bytisonly: '',
        strnote: '',
        paramorganizeList: []
      },
      rules: {
        strparamcode: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        strparamname: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        inttype: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        fieldproperty: [
          { required: true, message: '必填项', trigger: 'blur' },
          { required: true, message: '必填项', trigger: 'change' }
        ],
        bytisonly: [
          { required: true, message: '必填项', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    title() {
      const obj = {
        'add': '新增',
        'edit': '编辑',
        'detail': '查看'
      }
      return obj[this.pageType]
    }
  },
  created() {
  },
  methods: {
    openDialog() {
      this.dialog.isShow = true
      Object.keys(this.dialogForm).forEach(el => {
        this.dialogForm[el] = ''
      })
      this.dialogForm.inttype = 1
      this.dialogForm.paramorganizeList = []
      this.$nextTick(() => {
        this.$refs.dialogForm.clearValidate()
      })
    },
    editDialog(id) {
      findById(id).then(res => {
        if (res.code === 20000) {
          this.dialogForm = res.data
        }
      })
      this.dialog.isShow = true
      this.$nextTick(() => {
        this.$refs.dialogForm.clearValidate()
      })
    },
    addSave(formName, isMulti) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addData(this.dialogForm).then(res => {
            if (res.code === 20000) {
              this.$message.success(res.message)
              this.$emit('refresh')
              this.dialog.isShow = false
              if (isMulti === 'multi') {
                this.openDialog()
              }
            }
          })
        } else {
          return false
        }
      })
    },
    editSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editData(
            this.dialogForm,
            this.dialogForm.lngparamid
          ).then(res => {
            if (res.code === 20000) {
              this.$message.success(res.message)
              this.dialog.isShow = false
              this.$emit('refresh')
            }
          })
        }
      })
    },
    changeInttype() {
      this.dialogForm.fieldproperty = ''
    }

  }
}
</script>

<style scoped>

</style>
